<template>
<transition name='fade'>
  <music-list
  :title="title"
  :bg-image="bgImage"
  :songs="songs"
  @selectItem="selectItem"
  @randomItem="randomItem"
  ></music-list>
</transition>
</template>
<script>
  import { mapGetters, mapActions } from 'vuex';
  import { getSingerDetail } from '@/api/singer';
  import { createSong } from '@/common/js/song';
  import musicList from 'comp/music-list/musicList';

  export default {
    name: 'music-detail',
    computed: {
      title() {
        return this.singer.name;
      },
      bgImage() {
        return this.singer.avatar;
      },
      ...mapGetters(['singer']),
    },
    data() {
      return {
        songs: [],
      };
    },
    methods: {
      selectItem({ index }) {
        const list = this.songs;
        this.selectPlay({ list, index });
      },
      randomItem() {
        const list = this.songs;
        this.randomPlay({ list });
      },
      _getSingerDetail() {
        // 如果是从url直接进入 那么就返回歌手列表
        if (!this.singer.id) {
          this.$router.push({
            path: '/singer',
          });
        }
        getSingerDetail(this.singer.id).then((data) => {
          if (data.list) {
            this.songs = this._normalizeSong(data.list);
          }
        });
      },
      _normalizeSong(songs) {
        const ret = [];
        songs.forEach((item) => {
          const { musicData } = item;
          if (musicData.songid && musicData.albummid) {
            // 量产song
            ret.push(createSong(musicData));
          }
        });
        return ret;
      },
      ...mapActions([
        'selectPlay',
        'randomPlay',
      ]),
    },
    components: {
      musicList,
    },
    created() {
      this._getSingerDetail();
    },
  };
</script>
<style lang='stylus' scoped>
.fade-enter-active, .fade-leave-active {
  transition all .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity 0
  transform translate3D(100%, 0, 0);
}
</style>
